<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="vue3.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="container">
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in stus" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
        <ul>
            <li v-for="(item,index) in stus" :key="item.id">
               {{index}} {{item.id}} -- {{item.name}} -- {{item.age}}
            </li>
            <hr/>
        </ul>
        <span v-for="index in 10"> {{index}} </span>
        </div>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    stus:[
                        {id:'1001',name:'jack',age:19},
                        {id:'1002',name:'tom',age:23},
                        {id:'1003',name:'rose',age:45},
                        {id:'1004',name:'peter',age:21},
                    ]
                }
            }
        }).mount('#app')
    </script>
</body>
</html>